<template>
  <div class="container">
    <Search
      :searchData="searchData"
      @selData="selData"
      @gotoInit="gotoInit"
      v-if="isMount"
    ></Search>
    <el-table
      :data="tableObj.temporary"
      @row-click="handleRow"
      stripe
      style="width: 100%"
      lazy
    >
      <el-table-column prop="index" label="序号" width="150"> </el-table-column>

      <el-table-column prop="imgPath" label="图片" width="150">
        <template slot-scope="scope">
          <img
            :src="require('/src/assets/img/' + scope.row.imgPath)"
            width="50"
            height="50"
          />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="茶名" width="150"> </el-table-column>

      <el-table-column prop="type" label="类型" width="150"> </el-table-column>

      <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>

      <el-table-column prop="price" label="价格" width="150"> </el-table-column>

      <el-table-column prop="store" label="库存量" width="150">
      </el-table-column>

      <el-table-column prop="username" label="所属商家" width="150">
      </el-table-column>

      <el-table-column prop="" label="相关操作" width="300">
        <el-button type="success" icon="el-icon-edit" @click="modifyTea"
          >修改信息</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="deleteTea"
          >删除该商品</el-button
        >
      </el-table-column>
    </el-table>
    <Pages :tableObjs="tableObj" v-if="flag"></Pages>
    <ModifyTeaInfo @gotoInit="gotoInit"></ModifyTeaInfo>
  </div>
</template>

<script>
import { getReq, postRequest } from "../../util/request";
import { renderFunc } from "../../util/tools";
import Pages from "../../components/Pages.vue";
import ModifyTeaInfo from "../../components/Admin/ModifyTeaInfo.vue";
import Search from "../../components/Admin/search.vue";
export default {
  name: "ManageTea",
  components: { Pages, ModifyTeaInfo, Search },
  data() {
    return {
      flag: false,
      isMount: false,
      tableObj: {
        tableData: [],
        number: 3,
        totalPages: 0,
        currentPage: 1,
        temporary: [],
      },
      searchData: "",
    };
  },
  methods: {
    //点击行
    handleRow(row) {
      this.rowData = row;
    },
    //初始化
    init() {
      let getAllUser = getReq("admin/getAllTea");
      getAllUser.then(
        (res) => {
          renderFunc(res.data, this.tableObj);
          this.flag = true;
          this.searchData = this.tableObj;
          this.isMount = true;
        },
        (err) => {
          throw err;
        }
      );
    },
    //修改茶叶信息
    modifyTea() {
      setTimeout(() => {
        this.$bus.$emit("teaData", this.rowData);
      });
    },

    //先初始化

    //接受子组件，更新数据
    gotoInit(data) {
      if (data) {
        this.init();
      }
    },

    //搜索到的商品
    selData(data) {
      setTimeout(() => {
        if (data.length === 0) {
          this.$message({
            type: "warning",
            message: "为找到搜索的内容",
            duration: 3000,
          });
          renderFunc(this.tableObj.tableData, this.tableObj);
        } else {
          renderFunc(data, this.tableObj);
        }
      }, 100);
    },

    //删除茶叶信息
    deleteTea() {
      setTimeout(() => {
        if (window.confirm("确定删除该商品吗?")) {
          let deleteResult = postRequest("admin/deleteTea", {
            teaId: this.rowData.teaId,
          });
          deleteResult.then((res) => {
            if (res.data.isDelete) {
              this.$message({
                type: "success",
                message: "删除成功",
                duration: 3000,
              });
              this.init();
            }
          });
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  background-color: white;
  padding-top: 10px;
}
</style>